let ImageUpload = {
    init: function (opt = {}) {
        if (this.isInit && !opt.autoDestroy) return
        this.isInit = true;
        const { el, onChange } = opt;
        // console.log(onChange)
        this.onChange = onChange || '';
        const container = document.querySelector(el);
        const fileInput = container.querySelector('input[type="file"]');
        this.container = container;
        fileInput.addEventListener('change', this.fileInputChange.bind(this));
    },

    fileInputChange(e) {
        const { target } = e;
        let { files } = target;
        if (!files || !files.length) return;
        let file = files[0];
        this.onChange && this.onChange(files, () => {
            this.fileUploadComplete({ file })
        });
    },

    fileUploadComplete({ file }) {
        let pla = this.container.querySelector('.placeholder');
        let val = this.container.querySelector('.value');
        var preview = this.container.querySelector('.upload-preview');
        val.innerHTML = file.name;
        pla.style.display = 'none';
        preview.style.display = 'inline-block';
        // console.log(file.name, pla, val)
    }
};



export default ImageUpload 